<template>
  <div>
      <h2>product组件</h2>
      <ul>
          <li v-for="product in products" :key="product.id">
              <router-link :to="'/product/'+product.id">商品id：{{product.id}} </router-link>
         </li>
      </ul>
  </div>
</template>
<script>

export default {
  data () {
      return {
          products: []
      }
  },
  mounted () {   
      this.getProducts()
      console.log('produtcs='+this.products)
  },
  watch: {
    //   '$route': 'getProducts' // 如果路由有变化，会再次执行该方法
  },
  methods: {
      getProducts() {
          console.log('发送请求')
          var self = this
         this.$http.get('api/product/').then( (response) => {
             self.products = response.body.data
         })
      }
  }
}
</script>
